<template>
  <a-table
    :columns="columns"
    :rowKey="record => record.uuid"
    :dataSource="articles"
    :pagination="pagination"
    :loading="loading"
    size="middle"
    bordered>
    <!--自定义时间-->
    <template slot="fromNow" slot-scope="text, record, index">
      <span :title="moment(record.createAt).format('YYYY-MM-DD HH:MM:ss')">{{ text }}</span>
    </template>
    <!--自定义状态-->
    <template slot="status" slot-scope="text, record, index">
      <a-icon type="check-circle" style="color: #87d068;font-size: 20px" v-if="record.status"/>
      <a-icon type="close-circle" style="color: orange;font-size: 20px" v-else/>
    </template>
    <!--自定义操作-->
    <template slot="operation" slot-scope="text, record, index">
      <div class="editable-row-operations">
        <a-button size="small"
                  ghost
                  type="primary"
                  @click="editArticle(record)"
                  shape="round">编辑</a-button>
        <a-popconfirm :title="`确认删除 `+record.title+ ` ?`" @confirm="deleteArticle(record)">
          <a-button size="small" ghost type="danger" shape="round">删除</a-button>
        </a-popconfirm>
      </div>
    </template>
  </a-table>
</template>

<script>
  import app from "../../../../app"
  import moment from "moment";
  moment.locale("zh-CN");
  export default {
    name: "list",
    layout: "admin",
    head: ()=>({ title: `文章列表 - ${app.name}` }),
    async asyncData({ $axios, store, error }) {
      let url = `${app.api}/api/${app.apiVersion}/admin/articles/`;
      const resp = await $axios.$get(url);
      let articles = resp.code === 200 ? resp.data : [];
      articles.forEach((item)=>{
        let time = item.createAt;
        item.fromNow = moment(time).fromNow()
      });
      return { articles }
    },
    data: ()=>({
      moment,
      loading: false,
      pagination: {

      },
      columns: [
        {
          title: 'ID',
          dataIndex: 'id',
          width: '5%',
          scopedSlots: { customRender: 'id' },
        },
        {
          title: '创建日期',
          dataIndex: 'fromNow',
          width: '8%',
          scopedSlots: { customRender: 'fromNow' },
        },
        {
          title: '状态',
          dataIndex: 'status',
          width: '5%',
          scopedSlots: { customRender: 'status' },
        },
        {
          title: '作者',
          dataIndex: 'author',
          width: '5%',
          scopedSlots: { customRender: 'author' },
        },
        {
          title: '标题',
          dataIndex: 'title',
          width: '10%',
          scopedSlots: { customRender: 'title' },
        },
        {
          title: '浏览量',
          dataIndex: 'viewCounts',
          width: '5%',
          scopedSlots: { customRender: 'viewCounts' },
        },
        {
          title: '点赞数',
          dataIndex: 'likeCounts',
          width: '5%',
          scopedSlots: { customRender: 'likeCounts' },
        },
        {
          title: '评论数',
          dataIndex: 'commentCounts',
          width: '5%',
          scopedSlots: { customRender: 'commentCounts' },
        },
        {
          title: '分类',
          dataIndex: 'category',
          width: '8%',
          scopedSlots: { customRender: 'category' },
        },
        {
          title: '标签',
          dataIndex: 'tags',
          width: '15%',
          scopedSlots: { customRender: 'tags' },
        },
        {
          title: '操作',
          dataIndex: 'operation',
          scopedSlots: { customRender: 'operation' },
        },
      ],
    }),
    methods: {
      editArticle(record) {
        this.$router.push({ path:"/admin/article/edit/", query: { uuid:record.uuid }})
      },
      deleteArticle(record) {
        let url = `${app.api}/api/${app.apiVersion}/admin/article/`;
        this.$axios.$delete(url, { data: { uuid: record.uuid } })
          .then((resp)=>{
            if (resp.code === 200) {
              const index = this._data.articles.indexOf(record);
              this._data.articles.splice(index, 1);
              this.$message.success(resp.msg)
            }else {
              this.$message.warning(resp.msg)
            }
          }).catch((error)=>{

        })
      }
    }
  }
</script>

<style scoped>

</style>
